<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-plus"
        @click="handleUpdate(null)"
      >添加</el-button>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>
    <el-table
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border=""
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="userId" align="center" label="签到用户" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.userId}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="签到时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" class="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="签到用户" prop="userId">
          <el-input v-model="temp.userId" placeholder="签到用户"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      temp: {
        id: '',

        userId: ''
      },

      rules: {
        userId: [
          { required: true, message: '签到用户不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.init('sign', 1).loadData()
  },
  filters: {},
  methods: {
    exportExcelFile () {
      this.exportExcel({
        title: '用户签到',
        fields: [
          { field: 'userId', title: '签到用户' },

          { field: 'createTime', title: '签到时间' }
        ]
      }).then(info => {
        this.openWin(info)
      })
    }
  }
}
</script>
